<template>
    <div class="guest">
        <Header :show="true">嘉宾</Header>
        <div class="content">
       		<ul>
        		<!-- 循环嘉宾 -->
        		<li v-for="item,index in arrList.guest">
        			<div class="img">
        				<img :src="item.img">
        			</div>
        			<div class="text">
        				<p>{{item.name}}</p>
        				<p>{{item.introduce}}</p>
        			</div>
        		</li>
        	</ul>
        </div>
    </div>
</template>

<script>
import Header from '../base/Header'
	export default {
		data() {
			return {
				arrList:{},
				i:0
			}
		},
        components:{
        	Header
        },
        mounted(){
        	var id = this.$route.params.id;
        	this.fetchData(id);
        },
        methods: {
        	fetchData(id) {
        		let _this = this;
        		this.$http.get('static/data/invite.data')
        		.then(function(res){
        			_this.arrList = res.data[id].content;
        			_this.i = id;
        		}).catch(function(err){
        			console.log(err);
        		})
        	}
        }
	}
</script>

<style scoped lang="less">
.guest{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: #f4f4f4;
	.content{
		background: #f4f4f4;
		padding: 50px 10px 10px;
		font-size: 0.3rem;
		ul{
			li{ 
				padding: 0.2rem;
				margin-top: 0.15rem;
				background: #fff;
                border-radius: 4px;
				.img{
					width:17%;display: inline-block;
					img{width: 1rem;height:1rem;border-radius: 4px;}
				}
				.text{
					width: 76%;height:100%;display: inline-block;vertical-align: top;
					p{line-height: 0.36rem;}
					p:first-child{color: #777;font-size: 0.26rem;}
					p:last-child{color: #777;font-size: 0.24rem;}
				}
			}
		}
	}
}
</style>